import React from 'react';
import { Layout, Menu, Button } from 'antd';
import { Link } from 'umi';
import logo from '../../assets/logo.png';
import p_cam from '../../assets/cam.png';
import p_area from '../../assets/area.png';
import { AlertTwoTone } from '@ant-design/icons';
const { Header, Content, Footer } = Layout;

let timer: NodeJS.Timeout = setInterval(() => {}, 1000000);

function home() {
  window.location.href = '/zone';
}

function back() {
  window.location.href = '/zone';
}

function cam() {
  window.location.href = '/cam';
}

function cam10() {
  window.location.href = '/cam10';
}

function cam12() {
  window.location.href = '/cam12';
}

function cam13() {
  window.location.href = '/cam13';
}

function cam14() {
  window.location.href = '/cam14';
}

function cam15() {
  window.location.href = '/cam15';
}

function cam16() {
  window.location.href = '/cam16';
}

function cam17() {
  window.location.href = '/cam17';
}

function cam20() {
  window.location.href = '/cam20';
}

function cam21() {
  window.location.href = '/cam21';
}

function connect(l: any, r: any, t: any, b: any) {
  // bottom right
  var x1 = r * 1.0;
  var y1 = b * 1.0;
  // top right
  var x2 = l * 1.0;
  var y2 = t * 1.0;
  // distance
  var length = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
  // var length = x1 - x2;
  // center
  var cx = ((x1 + x2) * 1.0) / 2.0;
  var cy = ((y1 + y2) * 1.0) / 2.0;
  // angle
  var angle = Math.atan2(y1 - y2, x1 - x2) * (180 / Math.PI);
  // var voffset = Math.sin(angle) * 8;
  // var hoffset = Math.cos(angle) * 8;
  var voffset = 8;
  var hoffset = 8;
  // make hr
  var htmlLine =
    "<div style='padding:0px; margin:0px; height:5px; background-color: red; line-height:1px; position:absolute; left:calc(" +
    (l - (length / 2) * (1 - Math.cos((-angle * Math.PI) / 180))) +
    // l +
    'vw + ' +
    hoffset +
    'px); top:calc(' +
    (t - (length / 2) * Math.sin((-angle * Math.PI) / 180)) +
    // t +
    'vw + ' +
    voffset +
    'px); width:' +
    length +
    'vw; -moz-transform:rotate(' +
    angle +
    'deg); -webkit-transform:rotate(' +
    angle +
    'deg); -o-transform:rotate(' +
    angle +
    'deg); -ms-transform:rotate(' +
    angle +
    'deg); transform:rotate(' +
    angle +
    "deg);' ></div>";
  //
  // alert(htmlLine);
  // document.body.innerHTML += htmlLine;
  return htmlLine;
}

var loaded = false;
function onLoad(pts: any) {
  console.log(pts);
  if (pts.length === 0) return;
  if (loaded) return;
  loaded = true;
  let lines = '';
  pts.forEach(e => {
    lines += connect(e.x1, e.x2, e.y1, e.y2);
  });

  return { __html: lines };
}

class TodoItem extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = {
      pts: [],
    };
  }

  doReload() {
    window.location.reload();
  }

  componentWillMount() {
    // fetch('http://192.168.1.104:54432/pts', {
    fetch('http://8.135.42.100:54432/pts', {
      method: 'GET',
      mode: 'cors',
      headers: {
        Accept: 'application/json,text/plain,*/*',
        'Access-Control-Allow-Origin': '*',
      },
    })
      .then(res => res.json())
      .then(data => {
        this.setState({
          pts: data,
        });
      });
    timer = setInterval(() => this.doReload(), 10000);
  }

  componentDidMount() {}

  componentWillUnmount() {
    clearInterval(timer);
  }

  render() {
    return (
      <Layout
        style={{ height: '100%', fontFamily: 'global', background: '#322c2b' }}
      >
        <Header style={{ height: '80px', lineHeight: '40px' }}>
          <Content>
            <table style={{ height: '60px', marginLeft: '30%' }}>
              <tr style={{ height: '60px' }}>
                <td style={{ width: '120px', height: '60px' }}>
                  <img
                    src={logo}
                    style={{ width: '80px', cursor: 'unset', height: '80px' }}
                  />
                </td>
                <td style={{ height: '60px' }}>
                  <div
                    style={{
                      height: '27px',
                      fontSize: '27px',
                      lineHeight: '27px',
                      textAlign: 'center',
                      color: 'white',
                    }}
                  >
                    深圳外环高速10标段金沙互通工程段
                  </div>
                  <div
                    style={{
                      height: '27px',
                      fontSize: '27px',
                      lineHeight: '27px',
                      textAlign: 'center',
                      color: 'white',
                    }}
                  >
                    施工安全管理大数据中心
                  </div>
                </td>
              </tr>
            </table>
          </Content>
          <Button
            style={{ position: 'fixed', right: '20px', top: '8px' }}
            onClick={back}
          >
            返回
          </Button>
        </Header>
        <Content style={{ height: '100%', background: '#322c2b' }}>
          <div
            style={{
              width: '96vw',
              height: '49vw',
              lineHeight: '100%',
              textAlign: 'left',
            }}
          >
            <img
              src={p_area}
              style={{
                cursor: 'pointer',
                display: 'block',
                width: '100%',
                height: '100%',
                maxHeight: '900px',
              }}
            />
            <img
              id="c10"
              src={p_cam}
              onClick={cam10}
              width="16px"
              height="16px"
              style={{
                position: 'absolute',
                left: '30vw',
                top: '42vw',
                cursor: 'pointer',
              }}
              title="相机编号：10&#10;相机厂商：未知&#10;在线情况：在线&#10;相机位置：24#墩柱"
            />
            <img
              id="c12"
              src={p_cam}
              onClick={cam12}
              width="16px"
              height="16px"
              style={{
                position: 'absolute',
                left: '40vw',
                top: '32vw',
                cursor: 'pointer',
              }}
              title="相机编号：12&#10;相机厂商：未知&#10;在线情况：在线&#10;相机位置：27#墩柱"
            />
            <img
              id="c13"
              src={p_cam}
              onClick={cam13}
              width="16px"
              height="16px"
              style={{
                position: 'absolute',
                left: '80vw',
                top: '7.5vw',
                cursor: 'pointer',
              }}
              title="相机编号：13&#10;相机厂商：未知&#10;在线情况：在线&#10;相机位置：钢筋厂"
            />
            <img
              id="c14"
              src={p_cam}
              onClick={cam14}
              width="16px"
              height="16px"
              style={{
                position: 'absolute',
                left: '87vw',
                top: '7.5vw',
                cursor: 'pointer',
              }}
              title="相机编号：14&#10;相机厂商：未知&#10;在线情况：在线&#10;相机位置：钢筋厂"
            />
            <img
              id="c15"
              src={p_cam}
              onClick={cam15}
              width="16px"
              height="16px"
              style={{
                position: 'absolute',
                left: '46vw',
                top: '32vw',
                cursor: 'pointer',
              }}
              title="相机编号：15&#10;相机厂商：未知&#10;在线情况：在线&#10;相机位置：29#墩柱"
            />
            <img
              id="c16"
              src={p_cam}
              onClick={cam16}
              width="16px"
              height="16px"
              style={{
                position: 'absolute',
                left: '46vw',
                top: '29vw',
                cursor: 'pointer',
              }}
              title="相机编号：16&#10;相机厂商：未知&#10;在线情况：在线&#10;相机位置：29#墩柱北"
            />
            <img
              id="c17"
              src={p_cam}
              onClick={cam17}
              width="16px"
              height="16px"
              style={{
                position: 'absolute',
                left: '87vw',
                top: '9.5vw',
                cursor: 'pointer',
              }}
              title="相机编号：17&#10;相机厂商：未知&#10;在线情况：在线&#10;相机位置：钢筋厂"
            />
            <img
              id="c20"
              src={p_cam}
              onClick={cam20}
              width="16px"
              height="16px"
              style={{
                position: 'absolute',
                left: '55vw',
                top: '30vw',
                cursor: 'pointer',
              }}
              title="相机编号：20&#10;相机厂商：未知&#10;在线情况：在线&#10;相机位置：32#墩柱"
            />
            <img
              id="c21"
              src={p_cam}
              onClick={cam21}
              width="16px"
              height="16px"
              style={{
                position: 'absolute',
                left: '14vw',
                top: '41vw',
                cursor: 'pointer',
              }}
              title="相机编号：21&#10;相机厂商：未知&#10;在线情况：在线&#10;相机位置：21#墩柱"
            />
          </div>
          <div
            id="div_lines"
            style={{ height: '0px' }}
            dangerouslySetInnerHTML={onLoad(this.state.pts)}
          />
        </Content>
      </Layout>
    );
  }
}

export default TodoItem;
